<template>
  <div class="tableAction">
    <div class="flex items-center">
      <template v-for="(action, _index) in getActions" :key="`${_index}-${action.label}`">
        <div
          v-bind="action"
          :class="['mx-2', 'df-table-button', `${action.disabled ? 'disabled' : ''}`]"
          >{{ $t(`common.button.${action.label || action.prop}`) }}</div
        >
        <!-- <n-button v-bind="action" class="mx-2">{{
          $t(`common.button.${action.label || action.prop}`)
        }}</n-button> -->
      </template>
      <n-dropdown
        v-if="dropDownActions && getDropdownList.length"
        trigger="hover"
        :options="getDropdownList"
        @select="select"
      >
        <slot name="more"></slot>
        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
          <div class="flex items-center">
            <span>{{ $t('common.table.more') }}</span>
            <n-icon size="14" class="ml-1">
              <DownOutlined />
            </n-icon>
          </div>
          <!--          <template #icon>-->
          <!--            -->
          <!--          </template>-->
        </n-button>
      </n-dropdown>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, PropType, computed, toRaw } from 'vue';
  import { useRoute } from 'vue-router';
  import { ActionItem } from '@/components/DFTable';
  import { usePermission } from '@/hooks/web/usePermission';
  import { isBoolean, isFunction } from '@/utils/is';
  import { DownOutlined } from '@vicons/antd';

  export default defineComponent({
    name: 'TableAction',
    components: { DownOutlined },
    props: {
      actions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
        required: true,
      },
      dropDownActions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
      },
      style: {
        type: String as PropType<String>,
        default: 'button',
      },
      select: {
        type: Function as any,
        default: () => {},
      },
    },
    setup(props) {
      const { hasPermission } = usePermission();

      const route = toRaw(useRoute());

      const { meta = {} }: any = route;

      const { authCode = '' } = meta;

      const actionType =
        props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default';
      const actionText =
        props.style === 'button' ? undefined : props.style === 'text' ? true : undefined;

      const getMoreProps: any = computed(() => {
        return {
          text: actionText,
          type: actionType,
          size: 'small',
        };
      });

      const getDropdownList: any = computed(() => {
        return (toRaw(props.dropDownActions) || [])
          .filter((action) => {
            return hasPermission(action.auth as string[]) && isIfShow(action);
          })
          .map((action) => {
            const { popConfirm } = action;
            return {
              size: 'small',
              text: actionText,
              type: actionType,
              ...action,
              ...popConfirm,
              onConfirm: popConfirm?.confirm,
              onCancel: popConfirm?.cancel,
            };
          });
      });

      function isIfShow(action: ActionItem): boolean {
        const ifShow = action.ifShow;

        let isIfShow = true;

        if (isBoolean(ifShow)) {
          isIfShow = ifShow;
        }
        if (isFunction(ifShow)) {
          isIfShow = ifShow(action);
        }
        return isIfShow;
      }

      const getActions: any = computed(() => {
        return (
          (toRaw(props.actions) || [])
            // .filter((action) => {
            //   console.log(action);
            //   return hasPermission(action.auth as string[]) && isIfShow(action);
            // })
            .map((action) => {
              const { popConfirm } = action;
              //需要展示什么风格，自己修改一下参数
              return {
                size: 'small',
                text: actionText,
                type: actionType,
                ...action,
                ...(popConfirm || {}),
                onConfirm: popConfirm?.confirm,
                onCancel: popConfirm?.cancel,
                enable: !!popConfirm,
                disabled: checkedBtnDisabledFn(action),
              };
            })
        );
      });

      const checkedBtnDisabledFn = (action) => {
        const { disabled = false, prop = '', hump = false, auth = '' } = action;

        if (prop || auth) {
          const list: any = [];

          if (prop) {
            list.push(
              `${authCode}${
                hump ? prop.slice(0, 1).toUpperCase() + prop.slice(1).toLowerCase() : '-' + prop
              }`
            );
          }

          if (auth) {
            list.push(auth);
          }

          if (hasPermission(list)) {
            return disabled;
          } else {
            return true;
          }
        }

        return disabled;
      };

      return {
        getActions,
        getDropdownList,
        getMoreProps,
      };
    },
  });
</script>

<style lang="less" scoped>
  :deep(.items-center button:first-child) {
    margin-left: 0 !important;
  }
</style>
